<template>
    <div class="content" :data-router="$route.path">
        <router-view v-slot="{ Component, route }">
            <transition name="main" mode="out-in" appear>
                <keep-alive :include="cacheRoutes" :max="5" v-if="openKeepAlive">
                    <component :is="Component" :key="route.fullPath" />
                </keep-alive>
                <component :is="Component" :key="route.fullPath" v-else />
                <!-- <component :is="Component" :key="route.fullPath" /> -->
            </transition>
        </router-view>
    </div>
</template>

<script lang="ts">
import defaultSettings from '@/config/defaultSettings';
import store from '@/store';
import { computed, defineComponent, ref } from 'vue';
export default defineComponent({
    name: 'PageView',
    props: {
        avatar: {
            type: String,
            default: null
        },
        title: {
            type: [String, Boolean],
            default: true
        },
        logo: {
            type: String,
            default: null
        }
    },
    setup() {
        const pageTitle = ref(null);
        const description = ref(null);
        const linkList = ref([]);
        const extraImage = ref('');
        const search = ref(false);
        // 是否开启缓存
        const openKeepAlive = computed(() => {
            return defaultSettings.openKeepAlive;
        });
        // 缓存路由
        const cacheRoutes = computed(() => {
            console.log(store.state.permission.cacheRoutes);
            return store.state.permission.cacheRoutes;
        });
        return {
            pageTitle,
            description,
            linkList,
            extraImage,
            search,
            openKeepAlive,
            cacheRoutes
        };
    }
});
</script>
